<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入依赖包 -->
     <script src="./vue.js"></script>
</head>
<body>
     <!-- 容器 -->
     <div id="app">
           <h1 ref="cur">我们学习$nextTick</h1>
           <ul>
                <!-- 这里动态结构:mounted获取不到DOM元素 等待服务器数据回来以后在开始渲染 -->
               <li v-for="item in list" ref="box">{{item}}</li>
           </ul>
     </div>
</body>
</html>
<script>
     //初始化VM
     let vm = new Vue({
          el:'#app',
          data() {
              return {
                  list:[]
              }
          },
          //开发项目的时候:经常在VM|VC挂载完毕以后发请求
          mounted() {
             //异步语句---ajax发请求
             setTimeout(()=>{
                  this.list = ['吃饭','睡觉','打豆豆'];
             },1000);
          },
          //监听数据
          watch:{
              //监听list数据变化:能监听到服务器数据回来了，watch没有办法保证DOM渲染完毕。
              list(){
                    //外层watch能保证服务器数据回来了,内层的nextTick，能获取[下次]更新获取DOM元素！！！
                    this.$nextTick(()=>{
                        console.log(this.$refs.box);
                    })
              }
          },
          //updated这里确实可以获取到，开发时候几乎不用！！！！
         //   updated() {
         //       console.log(this.$refs.box);
         //   },
     });

     //豪哥问题:学习钩子函数有八个?当VM|VC,mounted执行的时候,一定能获取到模板中DOM元素?[百分之百吗?]
     //场景之一:mounted获取服务器数据动态展示服务器数据


     //$nextTick学习
     //官网定义:在[下次] DOM [更新循环结束] 之后执行延迟回调。获取(更新后)的 DOM
     //在修改数据之后立即使用这个方法，获取更新后的 DOM。


</script>